{% extends "radars/base.html" %}

{% block head %}
{{ description }}
{% if user %}
<p>Welcome, {{ user.nickname }}. Thanks for logging in. <a href="{{ logouturl}}">Logout</a></p>
{% else %}
<p>Welcome, new user. Please <a href="{{ loginurl }}"> log in</a>.</p>
{% endif %}

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbNTFBOKk3lu213pNqzbq8RTykspKlJC1ZYHam-z5BDn7-GolrRTQBKsc_e1zo15JCnvqykNtT1VxDA" 
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
greenIcon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
greenIcon.iconSize = new GSize(12, 20);
greenIcon.shadowSize = new GSize(22, 20);
greenIcon.iconAnchor = new GPoint(6, 20);

var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["Radar"] = iconBlue;
customIcons["Police Operation"] = iconRed;
customIcons["Mobile Radar"] = greenIcon;

function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(38.731724,-9.153156), 12);


		GDownloadUrl("/radars/points/", function(data) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var description = markers[i].getAttribute("description");
				var time = markers[i].getAttribute("created_on");
				var type = markers[i].getAttribute("point_type");
				var creator = markers[i].getAttribute("created_by");
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lt")),
				parseFloat(markers[i].getAttribute("lg")));
				var marker = createMarker(point, description, time, type, creator);
				map.addOverlay(marker);
			}
		});
		GEvent.addListener(map, "click", function(overlay, latlng) {
			if (latlng) {
				marker = new GMarker(latlng, {draggable:true});
				GEvent.addListener(marker, "click", function() {
					var html = "<table>" +
					"<tr><td>Description:</td> <td><input type='text' id='description'/> </td> </tr>" +
					"<tr><td>Type:</td> <td><select id='type'>" +
					"<option value='Radar' selected='selected'>Radar</option>" +
					"<option value='Police Operation'>Police Operation</option>" +
					"<option value='Mobile Radar'>Mobile Radar</option>" +
					"</select> </td></tr>" +
					"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

					marker.openInfoWindow(html);
				});
				map.addOverlay(marker);
			}
		});

	}
}

	function saveData() {
	var description = escape(document.getElementById("description").value);
	var type = document.getElementById("type").value;
	var latlng = marker.getLatLng();
	var lat = latlng.lat();
	var lng = latlng.lng();
	GDownloadUrl("/radars/directcreate/?"+"description="+description+"&lg="+lng+"&lt="+lat+"&point_type="+type, function(data, responseCode) {
		if (responseCode == 200 && data.length <= 1) {
			marker.closeInfoWindow();
			marker.hide()
			document.getElementById("message").innerHTML = "Location added.";
		}
		});
	}

	function createMarker(point, description, time, type, creator) {
		var marker = new GMarker(point, customIcons[type]);
		var html = "<b>" + type + "</b> <br/>" + description + "<br/><b> " + time + " by: "+ creator +"</b>";
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
		});
		return marker;
	}
	//]]>
	</script>
	{% endblock head %}

	{% block body %}
	<body onload="load()" onunload="GUnload()">

		<div id="map" style="height: 300px;"></div>



		{% for point in points %}
		<div class="point">
			{{point.get_position_string|escape}} - {{ point.get_description|escape}}
			<br>
			By {{point.get_creator|escape}} on {{point.get_creation_time|date}}
		</div>
		{% endfor %}
	</body>
	{% endblock %}